<template>
    <div class="all">
        <!-- <div style="text-align:center;font-size:28px;font-weight:bold;">{{$route.name}}</div> -->
        <div class="btn">
            <el-button
                v-if="activeStatus == 0"
                size="medium"
                type="primary"
                @click="endActive()"
            >活动已开启</el-button>
            <el-button
                v-if="activeStatus == 1"
                size="medium"
                type="primary"
                @click="startActive()"
            >活动已停止</el-button>
        </div>
        <div class="table">
            <!-- 表格 -->
            <el-table
                :data="activeTable"
                border
                :style="{width:screenWidth+'px'}"
                :cell-style="cellStyle"
                :header-cell-style="rowClass"
                @selection-change="allSelectionChange"
            >
                <!-- <el-table-column type="selection" width="60px"></el-table-column> -->
                <el-table-column type="index" label="序号" width="80px"></el-table-column>
                <el-table-column label="单次实付金额满(活动)" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.money }}元</span>
                    </template>
                </el-table-column>
                <el-table-column label="赠送优惠券数量" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.couponCount }}张</span>
                    </template>
                </el-table-column>
                <el-table-column label="赠送优惠券金额" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.couponMoney }}元</span>
                    </template>
                </el-table-column>
                <el-table-column label="优惠券到期时间" width="160px">
                    <template slot-scope="scope">
                        <span>{{ scope.row.couponEndTime }}天</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="100px">
                    <template slot-scope="scope">
                        <el-button
                            size="small"
                            type="primary"
                            @click="edit(scope.$index, scope.row)"
                        >修改</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <!-- <el-pagination
                @size-change="pageCount"
                @current-change="currentPageCount"
                :current-page="currentPage"
                :page-sizes="[100, 500,1000,1500, 2000]"
                :page-size="currentCount"
                layout="prev, pager, next, jumper, sizes,total"
                :total="pageResultSize"
            ></el-pagination>-->
        </div>
        <div>
            <!-- 修改对话框 -->
            <el-dialog title="修改" width="60%" :visible.sync="editVisible" center @close="closeEdit">
                <el-form :model="editActive">
                    <el-form-item label="实付金额：" :label-width="formLabelWidth">
                        <el-input v-model="editActive.money" placeholder="请输入实付金额"></el-input>
                        <span>元</span>
                    </el-form-item>
                    <el-form-item label="优惠券数量：" :label-width="formLabelWidth">
                        <el-input v-model="editActive.couponCount" placeholder="请输入优惠券数量"></el-input>
                        <span>张</span>
                    </el-form-item>
                    <el-form-item label="优惠券金额：" :label-width="formLabelWidth">
                        <el-input v-model="editActive.couponMoney" placeholder="请输入优惠券金额"></el-input>
                        <span>元</span>
                    </el-form-item>
                    <el-form-item label="到期时间：" :label-width="formLabelWidth">
                        <el-input v-model="editActive.couponEndTime" placeholder="请输入优惠券到期时间"></el-input>
                        <span>天</span>
                    </el-form-item>
                </el-form>
                <div slot="footer">
                    <el-button @click="cancelEdit">取 消</el-button>
                    <el-button type="primary" @click="confirmEdit">确 定</el-button>
                </div>
            </el-dialog>
        </div>
        
    </div>
</template>

<script>
import echarts from "echarts";
import "../../../static/scss/page.scss";
import utils from "../../util/request";
export default {
    data() {
        return {
            activeStatus: 0, //当前活动状态：0：开启，1：结束
            // 分页
            currentPage: 1, //初始页面
            currentCount: 100, //当前页面的数据数量
            pageResultSize: 10, //表格数据总数
            screenWidth: window.innerWidth, //可视宽度
            editVisible: false, //修改对话框
            formLabelWidth: "100px", //对话框的label宽度
            editActive: {
                // 修改对话框
                money: "", //实付金额
                couponCount: "", //优惠券数量
                couponMoney: "", //优惠券金额
                couponEndTime: "" //优惠券到期时间
            },
            activeTable: [
                {
                    money: "15", //单次实付金额满(活动)
                    couponCount: "3", //赠送优惠券数量
                    couponMoney: "5", //赠送优惠券金额
                    couponEndTime: "60" //优惠券到期时间
                }
            ]
        };
    },
    methods: {
        searchClick() {
            // 查询
        },
        endActive() {
            // 开启活动时点击按钮要关闭活动
            this.activeStatus = 1; //关闭活动
        },
        startActive() {
            //结束活动时点击按钮要开启活动
            this.activeStatus = 0; //开启活动
        },
        edit(index, row) {
            // 修改
            this.editVisible = true;
            this.editActive.money = row.money;
            this.editActive.couponCount = row.couponCount;
            this.editActive.couponMoney = row.couponMoney;
            this.editActive.couponEndTime = row.couponEndTime;
        },
        confirmEdit() {
            // 确认修改对话框
            this.editVisible = false;
        },
        cancelEdit() {
            // 取消修改对话框
            this.editVisible = false;
        },
        closeEdit() {
            // 关闭修改对话框
            this.editVisible = false;
        },
        //   表格居中
        cellStyle: function({ row, column, rowIndex, columnIndex }) {
            return "text-align:center;";
        },
        rowClass: function({ row, rowIndex }) {
            return "text-align:center;";
        },
        allSelectionChange: function(val) {
            // 获取选中的内容
            console.log(val);
            this.selectTable = val;
        },
        // 每页数据的数量
        pageCount: function(val) {
            this.currentCount = val;
        },
        // 点击的第几页
        currentPageCount: function(val) {
            this.currentPage = val;
        }
    },
    mounted() {},
    created() {}
};
</script>




